<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>login</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/login_register.css"/>
    <style>

        .login_contain{
            transition: 0.6s;
            /* left: 100%; */
        }
        .text_img_contain{
            overflow: hidden;
            transition: 0.6s;
            /* left: 0; */
        }

        .register_text{
            transition: 0.6s;
            left: 0%;
            /* left: 150%; */
        }

    </style>
</head>
<body>
<div class="full_screen" id="wrap">
    <div id="" class="contain">
        <div id="" class="login_register_contain">
            <div id="login_contain" class="form_style_contain login_contain">
                <form action="emplist1.html" method="post">
                    <h1>登录</h1>
                    <span id="">账户</span>
                    <input type="text"  v-model="user.username"  name="name" class="login_username" id="login_username" value="" placeholder="请输入你的用户名"/>
                    <span>密码</span>
                    <input type="password" v-model="user.password" name="pwd" class="login_pwd" id="login_pwd" value="" placeholder="请输入你的密码"/>
                    <span id="login_tip" class="login_tip">
<!--								用户名或者密码不正确-->
                    </span>
                    <button type="button" class=""  @click="login"  value="Submit &raquo;" >登&nbsp;&nbsp;&nbsp;录</button>
                </form>
            </div>
        </div>
        <div id="text_img_contain" class="text_img_contain">
            <div id="text_img" class="text_img">
                <div id="register_text" class="form_style_text register_text">
                    <div id=" " class="form_style_text_title register_text_title">
                        <h1>还未注册</h1>
                    </div>
                    <div id="register_text_button_contain" class="form_style_text_button_contain register_text_button_contain">
                        <a href="/regist.html">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script src="/js/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            user:{},//用来保存用户数据
        },
        methods:{
            //用户登录
            login(){
                console.log("123")
                //发送登录请求
                axios.post("/user/login",this.user).then(res=>{
                    console.log(res.data);
                    if(res.data.state){
                        alert(res.data.msg+",点击确定进入主页!");
                        //将登录用户信息放入localStorage key  value
                        localStorage.setItem("user",JSON.stringify(res.data.user));
                        location.href="/emplist.html";
                    }else{
                        alert(res.data.msg);
                    }
                });
            }
        }
    });
</script>